<template>
	<view class="lottery-container">
		<!-- 九宫格奖品展示 -->
		<view class="prize-grid">
			<view class="prize-grid-item" v-for="(prize, index) in displayPrizes" :key="index">
				<view class="prize-grid-content">
					<image :src="config.staticUrl + '/' + prize.image" mode="aspectFit" class="prize-image"></image>
					<text class="prize-name">{{prize.name}}</text>
					<text class="prize-value">价值: ¥{{prize.value}}</text>
				</view>
			</view>
			<!-- 补充空白格子 -->
			<view class="prize-grid-item empty" v-for="i in (9 - displayPrizes.length)" :key="'empty-'+i">
				<view class="prize-grid-content">
					<text class="empty-text">?</text>
				</view>
			</view>
		</view>
		
		<!-- 抽奖按钮 -->
		<view class="lottery-button" @click="startLottery" :class="{'button-disabled': isRotating}">
			{{ isRotating ? '抽奖中...' : '开始抽奖' }}
		</view>
		
		<!-- 抽奖结果弹窗 -->
		<view class="result-modal" v-if="showResult">
			<view class="result-content">
				<text class="result-title">恭喜您获得</text>
				<image :src="config.staticUrl + '/' + resultPrize.image" mode="aspectFit" class="result-image"></image>
				<text class="result-prize">{{resultPrize.name}}</text>
				<text class="result-value">价值: ¥{{resultPrize.value}}</text>
				<button class="close-btn" @click="closeResult">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
import config from '@/config.js'

export default {
	data() {
		return {
			prizes: [],
			displayPrizes: [], // 用于展示的奖品列表
			isRotating: false,
			showResult: false,
			resultPrize: null,
			config: config,
			phone: '' // 添加手机号字段
		}
	},
	onLoad() {
		// 从本地存储获取手机号
		const userInfo = uni.getStorageSync('userInfo')
		if (userInfo) {
			this.phone = userInfo.phone
		}
		this.getPrizeList()
	},
	methods: {
		async getPrizeList() {
			try {
				console.log("正在获取礼品列表")
				const response = await uni.request({
					url: this.config.baseUrl + '/prize/list',
					method: 'GET'
				})
				
				console.log("获取的礼品列表为:", response.data)
				if (response.statusCode === 200) {
					this.prizes = response.data.records || []
					// 最多显示9个奖品
					this.displayPrizes = this.prizes.slice(0, 9)
				} else {
					uni.showToast({
						title: '获取奖品列表失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取奖品列表错误:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},
		async startLottery() {
			if (this.isRotating) return
			if (!this.phone) {
				uni.showToast({
					title: '请先填写个人信息',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/form/form'
					})
				}, 1500)
				return
			}
			
			this.isRotating = true
			
			try {
				const response = await uni.request({
					url: `${this.config.baseUrl}/draw?phone=${this.phone}`,
					method: 'POST'
				})
				
				if (response.statusCode === 200) {
					// 模拟抽奖动画
					setTimeout(() => {
						this.isRotating = false
						this.resultPrize = response.data
						this.showResult = true
					}, 3000)
				} else {
					this.isRotating = false
					uni.showToast({
						title: response.data || '抽奖失败，请重试',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('抽奖错误:', error)
				this.isRotating = false
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},
		closeResult() {
			this.showResult = false
			this.resultPrize = null
		}
	}
}
</script>

<style>
.lottery-container {
	padding: 20px;
	background: linear-gradient(to bottom, #f0f7ff, #ffffff);
	min-height: 100vh;
}

.prize-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 20rpx;
	padding: 20rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.prize-grid-item {
	position: relative;
	width: 100%;
	padding-bottom: 100%; /* 创建正方形 */
	background: #f8f9fa;
	border-radius: 16rpx;
	overflow: hidden;
}

.prize-grid-item.empty {
	background: #f0f0f0;
}

.prize-grid-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
}

.empty-text {
	font-size: 48rpx;
	color: #999;
}

.prize-image {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 16rpx;
	object-fit: contain;
}

.prize-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
	font-weight: 500;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.prize-value {
	font-size: 24rpx;
	color: #ff4d4f;
	text-align: center;
}

.lottery-button {
	width: 80%;
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(to right, #4a90e2, #357abd);
	color: white;
	border-radius: 44rpx;
	font-size: 32rpx;
	margin: 40rpx auto;
	text-align: center;
	box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
}

.button-disabled {
	opacity: 0.7;
	background: #999;
}

.result-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.result-content {
	background-color: white;
	padding: 40rpx;
	border-radius: 20rpx;
	text-align: center;
	width: 80%;
	max-width: 600rpx;
}

.result-title {
	font-size: 36rpx;
	color: #333;
	margin-bottom: 30rpx;
	font-weight: bold;
}

.result-image {
	width: 200rpx;
	height: 200rpx;
	margin: 20rpx auto;
}

.result-prize {
	font-size: 32rpx;
	color: #ff4d4f;
	margin: 20rpx 0;
	font-weight: bold;
}

.result-value {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 30rpx;
}

.close-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: linear-gradient(to right, #4a90e2, #357abd);
	color: white;
	border-radius: 40rpx;
	font-size: 28rpx;
	margin-top: 20rpx;
}
</style> 